<template>
	<view class="container">
		<view class="header-c">
			<img :src="userInfo.signature? userInfo.rawData.avatarUrl: `/static/default_avatar.png`" alt="用户头像">
			<view class="info-c" @click="toLogin">
				<span class="name">{{userInfo.signature? userInfo.rawData.nickName: '未登录'}}</span>
				<span class="phone">{{userInfo.signature? 18611594551: '点击登录账号'}}</span>
			</view>
		</view>
		<view class="list-c">
			<view class="item" v-for="(item, index) in itemList" :key="index" :data-index="index">
				<view class="item-l">
					<i class='icon' :class="item.icon"></i>
					<span class="title">{{item.title}}</span>
					<span class="amount" v-if="item.amount">{{item.amount}}<span>张</span></span>
				</view>
				<i class='icon mt-arrow-right-o'></i>
			</view>
		</view>
		<view class="btn" v-if="userInfo.signature" @click="logout">退出账号</view>
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="dialog" style="text-align: center;">
			<uni-popup-dialog title="确定退出？" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm">
				退出登录后将无法查看订单，重新登录即可查看
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>
	
<script>
	export default {
		data() {
			return {
				userInfo: {}, // 用户信息
				itemList: [
					{
						title: '美团红包',
						icon: 'mt-red-packet-o',
						path: '/pages/redPacket/main',
						// amount: 4
					}, 
					{
						title: '商家代金券',
						icon: 'mt-coupon-o',
						path: '/pages/couponList/main',
						// amount: 10
					},
					{
						title: '我的地址',
						icon: 'mt-my-location-o',
						path: '/pages/addressList/main'
					},
					{
						title: '邀请有奖',
						icon: 'mt-gift-o'
					},
					{
						title: '客服中心',
						icon: 'mt-customer-service-o'
					},
					{
						title: '帮助和反馈',
						icon: 'mt-help-o',
						path: '/pages/feedback/main'
					},
					{
						title: '协议和说明',
						icon: 'mt-protocol-o',
						path: '/pages/protocol/main'
					},
				]
			}
		},
		// 方法
		methods: {
			// 跳转到登录页面
			toLogin() {
				if (!this.userInfo.signature) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 登出
			logout() {
				this.$refs.popup.open()
			},
			// 关闭对话框
			close() {
				this.$refs.popup.close()
			},
			// 确定回调
			confirm() {
				// 清除用户信息
				uni.removeStorageSync('userInfo')
				this.userInfo = {}
				this.$refs.popup.close()
			},
			// 获取用户信息
			getUserInfo() {
				// 尝试读取用户信息
				const userInfo = uni.getStorageSync('userInfo') || this.$mp.query.userInfo
				// 判断是否已登录
				if (userInfo) {
					this.userInfo = JSON.parse(userInfo)
				}
			}
		},
		
		// 页面挂载完成
		mounted() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
.container {
  .header-c {
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #FFD26B;
    img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-left: 30rpx
    }
    .info-c {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;
      .name {
        font-size: 32rpx;
        color: $textBlack-color;
        font-weight: bold;
      }
      .phone {
        font-size: 28rpx;
        color: $textBlack-color;
      }
    }
  }
  .list-c {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    background-color: white;
    .item {
      display: flex;
      align-items: center;
      height: 88rpx;
      border-bottom: 2rpx solid $spLine-color;
      padding: 0 20rpx;
      .item-l {
        display: flex;
        flex: 1;
        i {
          font-size: 38rpx;
          color: $textDarkGray-color;
        }
        .title {
          font-size: 28rpx;
          color: $textBlack-color;
          margin-left: 30rpx;
          margin-top: 6rpx;
        }
        .amount {
          font-size: 38rpx;
          color: $mtRed-color;
          margin: 0 10rpx;
          display: flex;
          align-items: center;
           span {
             font-size: 24rpx;
             color: $textDarkGray-color;
             margin-left: 10rpx;
           }
        }
      }
      i {
        font-size: 24rpx;
        color: $textGray-color;
      }
    }
    .item:last-child {
      border-bottom: 0rpx solid $spLine-color;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    background-color: white;
    margin-top: 20rpx;
    color: $textBlack-color;
    font-size: 28rpx;
  }
}
</style>